<template>
  <div class="add-container" v-if="showAdd">
    <!-- head return-->
    <div class="address-head">
      <van-nav-bar title="地址">
        <template #left>
          <van-icon name="arrow-left" size="24" color="black"
            @click="isForOrder?$router.push('/home/view'):$router.push('/home/account')" />
        </template>
      </van-nav-bar>
    </div>

    <div>
      <van-address-list v-model="chosenAddressId" :list="addList" :disabled-list="disabledList"
        :disabled-text="disabledList.length !== 0?'以下地址超出配送范围':''" default-tag-text="默认" @add="onAdd" @edit="onEdit"
        @select="enterAddress" @select-disabled="UnSelectAddress" @edit-disabled="onEdit" />
      <van-empty v-if="disabledList.length === 0&&addList.length === 0" description="请添加地址" />
    </div>
  </div>
</template>

<script>
import bus from '@/eventBus.js'

export default {
  data() {
    return {
      chosenAddressId: '1',
      addList: [],
      disabledList: [],
      nowAddress: {},
      isForOrder: false,
      showAdd: false
    }
  },
  created() {
    // 模拟判断 是否初始化请求地址列表
    if (this.$store.state.addressList.length === 0) {
      this.$store.dispatch('getAddressList')
    }
    // 此状态用于管理从 Address 组件返回时的路由路径
    this.isForOrder = this.$store.state.isForOrder

    // vuex 读取判断当是手动定位还是自动定位,用于判断地址是否在范围内
    var AddMode = this.$store.state.positionMode
    if (AddMode) {
      var nowCity = this.$store.state.changePosition.detailInfo.cityname
    } else {
      var cityInfo = this.$store.state.nowPositong.detailInfo
      if (cityInfo.city.length !== 0) {
        nowCity = cityInfo.city
      } else {
        nowCity = cityInfo.province
      }
    }
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
      duration: 120
    })
    setTimeout(() => {
      // vuex 读取地址列表
      var addList = this.$store.state.addressList
      // 根据定位分类可使用地址
      addList.forEach(item => {
        if (item.address.indexOf(nowCity) === -1) {
          this.disabledList.push(item)
        } else {
          this.addList.push(item)
        }
      })
      // 处理完毕，显示 Dom
      this.showAdd = true
    }, 120)
  },
  // 通过 eventBus 传参，需要在 beforeDestroy() 阶段，否则会造成多次触发事件，导致数据累积
  beforeDestroy() {
    bus.$emit('nowAddress', this.nowAddress)
  },
  methods: {
    // 添加地址
    onAdd() {
      this.$router.push('/home/addedit')
    },
    // 编辑地址
    onEdit(item, index) {
      this.nowAddress = item
      this.$router.push('/home/addedit')
    },
    // 确认订单选择的地址
    enterAddress(item) {
      if (this.isForOrder === true) {
        this.$store.commit('enterAddress', item)
        this.$router.push('/home/view')
      }
    },
    UnSelectAddress() {
      this.$toast({ message: '不可选择', duration: 500 })
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  position: fixed;
  max-width: 640px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.van-address-list {
  margin-top: 46px;
  .van-address-list__bottom {
    background: #ededed;
  }
  .van-tag--danger {
    background-color: orange;
  }
  /deep/ .van-address-item .van-radio__icon--checked .van-icon {
    background-color: orange;
    border-color: orange;
  }
  .van-button {
    max-width: 640px;
    background: orange;
    border: none;
    color: white;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 1em;
  }
}
</style>
